<template>
    <div class="header" :style="headercolor">
        <div class="zxca">
            <!-- <div class="tabnav0">
                <span>{{ navIdcopy }}</span>
            </div> -->
            <el-breadcrumb class="tabnav">
                <el-breadcrumb-item class="addScroll">
                    <el-tag v-for="(tag, index) in navList" class="nduiwdh23" :key="tag.name" :closable="tag.name !== '首页'"
                        @close="handleClose(tag, index)" :effect="$route.name == tag.path ? 'dark' : 'plain'"
                        @click="chosetag(tag)">

                        <svg style="margin-right: 5px;" t="1748509597645" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="7023" width="15" height="15">
                            <path
                                d="M512 192a320 320 0 1 0 0 640 320 320 0 1 0 0-640z m448 320a448 448 0 1 1-896 0 448 448 0 1 1 896 0z"
                                p-id="7024"></path>
                        </svg>

                        {{ tag.name }}
                    </el-tag>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="rightBox" :style="headercolor">

            <div class="rb1">

                <div class="btn1">
                    <el-button @click="toHome" style="font-size: 14px;color: #666;padding: 0 15px;" type="text"
                        size="small" class="el-icon-s-home"> 主页</el-button>
                </div>
                <div class="btn1">
                    <el-button @click="toggleWatermark" style="font-size: 14px;color: #666;padding: 0 15px;" type="text"
                        size="small" class="el-icon-brush"> 水印</el-button>
                </div>
                <!-- <div class="btn1">
                    <el-tooltip class="item" effect="dark" content="主题" placement="bottom">
                        <el-button @click="toggleStyle" style="font-size: 18px;color: #666;padding: 0 15px;" type="text" size="mini"
                            class="el-icon-sunny"></el-button>
                    </el-tooltip>
                </div> -->
                <div class="btn1">
                    <el-button @click="SystemControl" style="font-size: 14px;color: #666;padding: 0 15px;" type="text"
                        size="small" class="el-icon-delete-solid"> 清除缓存</el-button>
                </div>
                <div class="btn1">
                    <el-button @click="toggleFullscreen" style="font-size: 14px;color: #666;padding: 0 15px;" type="text"
                        size="small" class="el-icon-full-screen"> 全屏</el-button>
                </div>
                <div class="btn1">
                    <el-button @click="logout" style="font-size: 14px;color: #666;padding: 0 15px;" type="text" size="small"
                        class="el-icon-switch-button"> 退出登录</el-button>
                </div>
                <!-- <el-dropdown style="margin-right: 30px;" @command="handleCommand">
                    <span class="el-dropdown-link user el-icon-user-solid">
                        {{ userData.name }}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="e">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown> -->

            </div>
        </div>
    </div>
</template>

<script>
import {  systemControlOptionsClear } from "@/utils/api";
import screenfull from 'screenfull';
export default {
    name: 'headerInfo',
    data() {
        return {
            headercolor: 'background-color: #fff',
            dialogVisible: false,
            tabText: '欢迎访问管理后台',
            navIdcopy: '',
            routeNameMap: {
                welcome: '— 首页',
                homeshow: '— 图片设置',
                economiccalendar: '— 经济日历',
                financelist: '— 财经新闻',
                featured: '— 编辑精选',
                news: '— 实时列表',
                article: '— 文章列表',
                draft: '— 草稿箱',
                userrolepage: '— 角色列表',
                adminusermenu: '— 角色权限',
                system: '— 系统设置',
                menulist: '— 菜单列表',
                user: '— 用户列表',
                userlevel: '— 用户等级',
            }
            // localNavList: JSON.parse(JSON.stringify(this.navList)) // 深拷贝
            // navList:JSON.parse(localStorage.getItem("menuList"))
        };
    },
    props: {
        userData: {
            required: true
        },
        navId: {
            required: true
        },
        navList: {
            required: true
        }
    },
    watch: {
        navId(newValue) {
            this.navIdcopy = '— ' + newValue;
        }
    },
    mounted() {
        this.navIdcopy = this.routeNameMap[this.$route.name] || '';
    },

    methods: {
        toHome(){
            window.open('https://autonomymex.com/', '_blank');
        },
        chosetag(tag) {

            console.log(this.navId, '菜单ID');
            if (this.$route.name !== tag.path) {
                this.$router.replace({ path: `/${tag.path}` })
            }
            this.navIdcopy = this.routeNameMap[this.$route.name] || '';
        },
        handleClose(tag) {

            var menuList = JSON.parse(localStorage.getItem("menuList"))

            // 查找并删除指定 id 的对象，同时获取下一项的 path
            var nextPath = null;
            var lastPath = false
            for (let i = 0; i < menuList.length; i++) {
                if (menuList[i].id === tag.id) {
                    // 如果不是最后一个元素，则获取下一个元素的 path
                    if (i + 1 < menuList.length) {
                        nextPath = menuList[i + 1].path;
                    } else {
                        lastPath = true
                    }
                    // 删除当前元素
                    menuList.splice(i, 1);
                    break; // 找到并处理完之后退出循环
                }
            }
            localStorage.setItem('menuList', JSON.stringify(menuList))

            if (this.$route.name == tag.path && !lastPath) {
                this.$router.replace({ path: `/${nextPath}` })
            }
            if (lastPath && this.$route.name == tag.path) {
                this.$router.replace({ path: `/welcome` })
            }

            this.$emit('update-parent-data', menuList);
        },
        toggleFullscreen() {
            if (screenfull.isEnabled) {
                screenfull.toggle();
            } else {
                this.$message.warning('全屏功能不可用')
            }
        },
        logout() {
            if (confirm('确认退出登录？')) {
                localStorage.removeItem('token')
                localStorage.removeItem('user')
                localStorage.removeItem('menuList')
                this.$router.push('/Login')
            }
        },
        toggleStyle() {
            this.$emit('toggleStyle'); // 发出事件来切换水印显示状态
        },
        toggleWatermark() {
            this.$emit('toggle-watermark'); // 发出事件来切换水印显示状态
        },
        async SystemControl() {
            const res = await systemControlOptionsClear().catch((err) => {
                return console.error(err);
            });
            if (res.data.code == '200') {
                this.$message.success(res.data.msg)
            }
        },
    },
};
</script>
<style>
.el-tag--plain .el-tag__close {

    color: #000 !important;
    background-color: #fff !important;
}

.el-tag .el-icon-close {
    top: inherit !important;
    font-size: 14px !important;
    /* right: inherit !important; */
    color: #000 !important;
    background-color: #fff !important;
}
</style>
<style lang="less" scoped>
.header {
    height: 50px;
    display: flex;
    z-index: 999;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .zxca {
        height: 50px;
        display: flex;
        align-items: center;
        flex: 1;

        .tabnav0 {
            padding-left: 20px;
            width: 160px;
            font-size: 13px;
            display: flex;
            align-items: center;
            text-align: center;
            font-weight: 700;
        }

        .tabnav {
            line-height: 50px;
            font-size: 14px;
            font-weight: 700;
            padding-right: 20px;
            padding-left: 40px;
            overflow: auto;
            overflow-x: auto;
            height: 100%;
            overflow: hidden;

            .nduiwdh23 {
                display: flex;
                align-items: center;
                cursor: pointer;
                height: 100%;
                background-color: #fff;
                padding: 0 15px;
                border: none;
                font-size: 14px;
                margin: 0;
                line-height: 50px;
                color: #505050;
            }

            .nduiwdh23:hover {
                background-color: #f9f9f9;
            }


        }


    }

    .rb1 {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: end;
        padding-right: 15px;

        .btn1 {
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .btn1:hover {
            background-color: #f6f5f5;
        }
    }

    .rightBox {
        // line-height: 58px;
        display: flex;
        justify-content: end;
        position: relative;
        width: auto;



        .user {
            font-size: 14px;
            color: #666;
            cursor: pointer;
            height: 50px;
            line-height: 50px;
            // margin-right: 5%;
        }

        .offbtn {
            margin-right: 1%;
        }

        .user:hover {
            color: #888;
        }

        .rb1 {
            padding: 0 5px;
        }
    }

}

@media (max-width:768px) {}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.el-breadcrumb /deep/ .el-breadcrumb__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.el-breadcrumb__item {
    height: 100%;
}

.el-tag {
    cursor: pointer;
}
</style>